<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div onclick="console.log('first div')">
    <div onclick="console.log('second div')">
        <button onclick="console.log('button'+event.target)">Click!</button>
    </div>
</div>
</body>
<script id="demo1-变量提升问题">
    function sayHi(){
        console.log(name);
        console.log(age);
        var name = 'ES6';
        let age = 10;
    }
    sayHi();
    //undefined
    //ReferenceError
</script>

<script id="demo2">
    for(var i=0;i<3;i++){
        setTimeout(()=>{
            console.log(i);
        },100)
    }
    // 3 3 3

    for(let i=0;i<3;i++){
        setTimeout(()=>{
            console.log(i);
        },100)
    }
    // 0 1 2
</script>

<script id="demo3">
    const shape = {
        radius:10,
        diameter(){
            return this.radius * 2
        },
        perimeter:()=> 2 *Math.PI * this.radius
    }
    console.log(shape.diameter());;//20
    console.log(shape.perimeter());;//NaN
</script>

<script id="demo4">
    var c = {
        say:'hey!'
    }
    let d;
    d = c;
    c.say = 'hello!';
    console.log(d.say);//hello!
</script>
<script id="demo5">
    var a = 3;
    var b = new Number(3)
    var c = 3;
    console.log(a == b);//true
    console.log(a === b);//false
    console.log(b === c);//false
</script>
<script id="demo6">
    var number = 0;
    console.log('number:'+number++);//0
    console.log('number:'+ ++number);//2
    console.log('number:'+number);//2
</script>
<script id="demo7">
    var a = {}
    var b ={key:'b'}
    var c ={key:'c'}
    a[b]=123
    a[c]=456
    console.log(a[b]);
    console.log(a[c]);
    //因为键名称只能是字符串，b/c单做键会调用toString得到的都是[object Object]，
    // a[b],a[c]都等价于a["[object Object]"]，那不就是更新[object Object]这个键的值了

    var name = "name"
    var age = "age"
    a[name] = 'lyhm'
    a[age] = 20
    console.log(a[name]);//lyhm
    console.log(a[age]);//20

</script>
</html>